<template>
    <div>
        <Button type="primary" @click="addAdmin = true">添加管理员</Button>
        <Table border  :columns="columns" :data="data" ></Table>
        <Modal
                v-model="addAdmin"
                title="添加管理员"
                @on-ok="ok"
                @on-cancel="cancel">

            用户名：<Input v-model="addName" prefix="ios-contact" placeholder="Enter name" style="width: auto" />
            <br>
            密码：<Input v-model="addPass" prefix="ios-lock"  type="password" password placeholder="Enter password..." style="width: auto" />
            <br>
            权限：<Select v-model="group_id" style="width:200px">
            <Option v-for="(item,index)  in groups" :value="item.id" :key="index">{{ item.name }}</Option>
        </Select>
        </Modal>
        <Modal
                ID="editAdmin"
                v-model="editAdmin"
                title="编辑管理员"
                @on-ok="okEdit"
                @on-cancel="cancel">

            用户名：<Input v-model="editName" prefix="ios-contact" placeholder="Enter name" style="width: auto" />
            <br>
            密码： <Input v-model="editPass" prefix="ios-lock"  type="password" password placeholder="Enter password..." style="width: auto" />
            权限：<Select v-model="group_id2" style="width:200px">
            <Option v-for="(item,index)  in groups" :value="item.id" :key="index">{{ item.name }}</Option>     </Select>
        </Modal>
    </div>


</template>
<script>
    export default {
        name: "AdminComponent",
        data () {
            return {
                columns: [
                    {
                        title:'ID',
                        key:'id'
                    },
                    {
                        title: 'Name',
                        key: 'username',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.username)
                            ]);
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(this);
                                            this.editAdmin = true;
                                            this.show(params.index);
                                        }
                                    }
                                }, 'Edit'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data:[],
                groups:[],
                addAdmin: false,
                editAdmin: false,
                addName:"",
                addPass:"",
                editName:"",
                editPass:"",
                editId:"",
                group_id:'',
                group_id2:''
            }
        },
        mounted(){
            this.getAdmin();
            this.getgGroup();
        },
        methods: {
            //获取权限分组
            getgGroup(){
                axios.get('group',{
                }).then((response)=> {
                    const  len=response.data.data.length;
                    this.groups=response.data.data.slice(0,len);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //获取管理员列表
            getAdmin(){
                axios.get('admin',{
                }).then((response)=> {
                    const  len=response.data.length;
                    this.data=response.data.slice(0,len);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            ok () {
                //添加的用户名和密码
                axios.post('admin',{
                    'username':this.addName,
                    'password':this.addPass,
                    'group_id':this.group_id
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAdmin();
                    },1500)
                }).catch(function (error) {
                    console.log(error);
                });
                //
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            show (index) {
                console.log(this.data[index]);
                this.editName=this.data[index].username;
                this.editPass=this.data[index].password;
                this.editId=this.data[index].id;
                this.group_id2=this.data[index].group_id
            },
            remove (index) {
                const url='admin/'+this.data[index].id;
                axios.delete(url,{
                    data:{'id':this.data[index].id}
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    if(response.data.code===1){
                        //code为1是删除成功
                        this.data.splice(index, 1);
                    }else {}
                }).catch(function (error) {
                    console.log(error);
                });
            },
            okEdit(){
                const url="admin/"+this.editId;
                axios.put(url,{
                    'id':this.editId,
                    'username':this.editName,
                    'password':this.editPass,
                    'group_id':this.group_id2
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAdmin();
                    },1500);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
</script>


